<template>
  <div class="subjects">
    <el-card class="box-card">
      <el-form>
        <!-- 输入框 -->
        <el-form-item label="学科名称">
          <el-input style="width: 150px" v-model="reqParams.subjectName"></el-input>
          <!-- 按钮 -->
          <el-button style="margin-left: 160px" size="small" @click="clear()">清除</el-button>
          <el-button type="primary" size="small" @click="search()">搜索</el-button>
          <el-button style="float: right" type="success"
           size="small" @click="openDialog()">
            <i class="el-icon-edit"></i><span>新增学科</span>
          </el-button>
        </el-form-item>
      </el-form>
      <el-alert :title="`数据一共 ${total} 条`" type="info" :closable="false" show-icon></el-alert>
      <!-- 表格 -->
      <el-table :data="subjects" style="width: 100%; margin-top: 15px">
        <el-table-column type="index" label="序号" width="50px"></el-table-column>
        <el-table-column prop="subjectName" label="学科名称"></el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="创建日期" width="150px">
        <template slot-scope="scope">
          {{scope.row.addDate|parseTimeByString}}
        </template>
        </el-table-column>
        <el-table-column label="前台是否显示"> 
          <template slot-scope="scope">
             {{scope.row.isFrontDisplay===1?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录"> </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="240px"> 
          <template slot-scope="scope">
          <el-button type="text" @click="$router.push(`directorys?id=${scope.row.id}&name=${scope.row.subjectName}`)">学科分类</el-button>
          <el-button type="text" @click="$router.push(`tags?id=${scope.row.id}&name=${scope.row.subjectName}`)">学科标签</el-button>
          <el-button type="text" @click="openDialog(scope.row)">修改 </el-button>
          <el-button type="text" @click="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>  
      </el-table>
      <!-- 分页 -->
      <el-pagination 
      background 
      style="margin:20px;float:right"
      layout="prev, pager, next,sizes,jumper"
      @current-change="changedPage" 
      @size-change="sizeChange"
      :current-page='reqParams.page'
      :page-sizes="[5,10,15,20]"
      :page-size="reqParams.pagesize"
      :total="total">
      </el-pagination>
    </el-card>
  <!-- 使用组件 -->
  <subjects-add ref="subjectsadd" :data="currSubject" @updateSubject="updateSubject()"></subjects-add>
  </div>
</template>

<script>
import {list} from '@/api/hmmm/subjects.js'
import {remove} from '@/api/hmmm/subjects.js'
// 导入组件
import SubjectsAdd from '../components/subjects-add'
export default {
  name: "Subjects",
  // 注册组件
  components:{SubjectsAdd},
  data() {
    return {
    // 学科数据
    subjects:[],
    reqParams:{
      // 学科名称
      subjectName:'',
      // 当前页
      page:1,
      // 页面的大小
      pagesize:10, 
    },
     total:0,
     currSubject:{}
  }
},
  created(){
    this.getSubjects();
  },
  methods:{
    // 获取学科列表
  async getSubjects(){
  const {data} =  await list(this.reqParams)
  // console.log(data);
  this.subjects = data.items
  this.total = data.counts
  },
  // 切换列表页
  changedPage(changedPage){
  // console.log(changedPage);
  this.reqParams.page = changedPage
  this.getSubjects();
  },
  // 切换列表页的条数
  sizeChange(val){
  this.reqParams.page = 1
  this.reqParams.pagesize = val
  this.getSubjects()
  },
  // 删除学科列表
  remove(id){
    this.$confirm('此操作将永久删除该文件, 是否继续?', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      await remove(id)
      this.$message.success('删除列表成功')
      this.getSubjects()
    }).catch(() => {  

    })
  },
    // 搜索
  search(){
    if(this.reqParams.subjectName){
    this.reqParams.page = 1
    this.getSubjects();
    }else{
      this.getSubjects();
    }
  },
  // 清空搜索框
  clear(){
    if(this.reqParams.subjectName){
    this.reqParams.subjectName = ''
    }
  },
//  新增 修改
openDialog(subject){
  this.currSubject = subject || {}
  this.$nextTick(()=>{
  this.$refs.subjectsadd.open()
    })
   },
updateSubject(){
    if(!this.currSubject.id){
      this.reqParams.page = 1
    }
      this.getSubjects();
  }
 }, 
}
</script>

<style scoped lang='less'></style>
